<template>
  <view>
    <!-- 头部 -->
    <view class="header">
      <!-- 排行榜 -->
      <view class="header-A">
        <view class="left">炸猴王</view>
        <view class="right" @click="blood">第37轮排行榜></view>
      </view>
      <!-- 猴王血条 -->
      <view class="header_lifebar">
        <!-- 血条头像 -->
        <view class="header_lifebar_left">
          <image
            class="left_touxiang"
            src="../../static/index/Group122@2x.png"
            mode=""
          ></image>
        </view>
        <!-- 血条数 -->
        <view class="header_lifebar_right">
          <!-- 血条进度条 -->
          <u-line-progress
            :percentage="percentage"
            activeColor="#447deb"
            inactiveColor="#01e193"
            :showText="false"
            height="25"
          ></u-line-progress>
          <view class="xuetiao_title">32号猴王</view>
          <view class="xuetiaoshu">
            <text>{{ shengyuxuetiao }}/{{ xuetiao }}[{{ percentage }}%]</text>
          </view>
        </view>
      </view>
      <!-- {{ count === 0 ? '0' + count : 0 }} -->
      <view class="header-C">逃跑倒计时：{{ taopaoCount }}</view>
      <u-toast class="uToast" ref="uToast"></u-toast>
      <!-- 奖池 -->
      <view class="header-D" @click="Jackpot">
        <image
          src="../../static/index/batte.png"
          mode=""
          class="bottom-T"
        ></image>
        <view class="bottom-B"><text>183.3万</text></view>
      </view>
      <!-- 奖励 -->
      <view class="header-J">
        <view class="number-left">
          <image src="../../static/blood/Group122@2x.png" mode=""></image>
          <view class="number-right-child">
            <view class="number-left-top">最后炸得奖励</view>
            <view class="number-left-bottom">
              <image
                src="../../static/blood/ic_ape_stone10@2x.png"
                mode=""
              ></image>
              <text>98218</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 猴子 -->
      <view class="houwang_content">
        <!-- 猴子本身 -->
        <view class="header-E">
          <image
            ref="targetContainer"
            class="houwang"
            src="../../static/index/monkey_king1@2x.png"
            mode=""
          ></image>
        </view>
      </view>
    </view>
    <!-- 图片标题 -->
    <view class="content">
      <view class="content-A">
        <image
          src="../../static/index/炸死猴王@2x.png"
          mode=""
          class="first"
        ></image>
        <image src="../../static/index/奖励宝石@2x.png" mode=""></image>
      </view>
    </view>
    <!-- 炸弹弹窗1 -->
    <!-- <u-popup :show="show1" mode="center" :round="60" @close="close">
      <view class="Popup">
        <view class="Popup-first">
          <image src="../../static/popup/Group124@2x.png" mode=""></image>
        </view>
        <view class="Popup-two">炸他 2 血量</view>
        <view class="Popup-three" @click="handlePay(2)">
          <view class="Popup-three-left">需支付</view>
          <image src="../../static/popup/ic_ape_stone13@2x.png" mode=""></image>
          <view class="Popup-three-right">2</view>
        </view>
        <view class="Popup-four">
          <view class="Popup-three-left">我拥有宝石：</view>
          <image src="../../static/popup/ic_ape_stone13@2x.png" mode=""></image>
          <view class="Popup-three-right">2</view>
        </view>
        <view class="Popup-five">跳过宝石支付确认（可在奖池里再次开启）</view>
        <view class="Popup-six">
          <view class="Popup-six-top">
            <view class="Popup-six-left">猴王直接爆出：</view>
            <image
              src="../../static/popup/ic_ape_stone13@2x.png"
              mode=""
            ></image>
            <view class="Popup-six-right">1.2</view>
          </view>
          <view class="Popup-six-top">
            <view class="Popup-six-left">宝箱宝石增加：</view>
            <image
              src="../../static/popup/ic_ape_stone13@2x.png"
              mode=""
            ></image>
            <view class="Popup-six-right">1</view>
          </view>
        </view>
      </view>
    </u-popup> -->
    <!-- 炸弹按钮 -->
    <view class="bottom">
      <view class="bottom-pad">
        <!-- 按钮 -->
        <view class="bottom-A">
          <view class="A-orange" @click="handlePay(2)">
            <view class="left"></view>
            <view class="right">
              <view class="right-top">炸2血</view>
              <view class="right-bottom">2宝石</view>
            </view>
          </view>
          <view class="A-orange" @click="handlePay(100)">
            <view class="left"></view>
            <view class="right">
              <view class="right-top">炸10血</view>
              <view class="right-bottom">10宝石</view>
            </view>
          </view>
          <view class="A-orange" @click="handlePay(1000)">
            <view class="left"></view>
            <view class="right">
              <view class="right-top">炸100血</view>
              <view class="right-bottom">100宝石</view>
            </view>
          </view>
        </view>
        <!-- 底部文字 -->
        <view>
          <!-- 我的宝石 -->
          <view class="bottom-B">
            <view class="bottom-B-left">
              <view class="mine">我的</view>
              <image
                src="../../static/index/ic_ape_stone@2x.png"
                mode=""
              ></image>
              <view class="number">0</view>
            </view>
            <view class="bottom-B-content">
              <view class="point"></view>
              <view class="point-content">长按按钮可连续出炸弹</view>
            </view>
            <view class="bottom-B-right">
              <image src="../../static/index/image15@2x.png" mode=""></image>
              <view class="mine">自动炸</view>
            </view>
          </view>
          <view class="bottom-C">
            <image src="../../static/index/ht1@2x.png" mode=""></image>
            <view class="mine">炸猴王奖励</view>
          </view>
          <view class="bottom-D"
            >购买炸弹炸猴王，猴王会爆出宝石同时你会获得一个未解锁的宝箱。</view
          >
          <view class="bottom-E">
            <view class="bottom-E-top">举个例子</view>
            <view class="bottom-E-connent">
              您花费100宝石炸掉3号猴王100点血，猴王直接爆出60宝石同时获得一个装了50宝石的未解锁3号宝箱。
            </view>
            <view class="bottom-E-bottom">
              <view class="bottom-first">
                <image src="../../static/index/Group129@2x.png" mode=""></image>
                <view class="bottom-first-money">
                  <text>花费100</text>
                  <image
                    src="../../static/index/ic_ape_stone@2x.png"
                    mode=""
                  ></image>
                </view>
              </view>
              <view class="bottom-two">
                <image src="../../static/index/Frame.png" mode=""></image>
              </view>
              <view class="bottom-three">
                <image
                  src="../../static/index/monkey_king2@2x.png"
                  mode=""
                ></image>
                <view class="bottom-three-money">
                  <text>爆出60</text>
                  <image
                    src="../../static/index/ic_ape_stone@2x.png"
                    mode=""
                  ></image>
                </view>
              </view>
              <view class="bottom-four">
                <image src="../../static/index/+@2x.png" mode=""></image>
              </view>
              <view class="bottom-fine">
                <image src="../../static/index/image22@2x.png" mode=""></image>
                <view class="bottom-fine-money">
                  <text>50</text>
                  <image
                    src="../../static/index/ic_ape_stone@2x.png"
                    mode=""
                  ></image>
                </view>
              </view>
            </view>
          </view>
          <view class="bottom-F">关于宝箱：</view>
          <view class="bottom-G"
            >1号宝箱会在6号猴王被击败后解锁，其它宝箱以此类推。</view
          >
          <view class="bottom-H"
            >如果猴王逃跑成功，猴王会将所有宝箱钥匙幸走，未解锁的宝箱全部作废，游戏重置。</view
          >
          <view class="bottom-I">
            <image src="../../static/index/image19@2x.png" mode=""></image>
            <view class="mine">奖池奖励</view>
          </view>
          <view class="bottom-J"
            >猴王在预定时间内未被击败逃跑成功，炸过该编号猴王的人可瓜分奖池里的宝石，贡献越多，奖励越高（最后一位炸的人可额外获得奖励)。</view
          >
          <view class="bottom-K"
            >猴王逃跑的初始时长为3小时，每被炸10次，选跑时长增加1秒，选跑时间上限，不超过初始时长。</view
          >
          <view class="bottom-L">
            <view class="bottom-L-left">
              <view class="bottom-L-top">奖池宝石来源</view>
              <view class="bottom-L-connent"> 平台打猴所有未解锁的宝石 </view>
            </view>
            <view class="bottom-L-right">
              <image src="../../static/index/Group135@2x.png" mode=""></image>
            </view>
          </view>
          <view class="bottom-M"
            >猴王逃跑成功，奖池宝石的1%被销毁，99%被瓜分：因不可抗力因素导致活动异常时，平台有权结束游戏。</view
          >
          <view class="bottom-N">
            <view class="bottom-N-monkey">
              <view class="bottom-N-mon">
                <view class="bottom-mon-top">
                  <image
                    src="../../static/index/ic_ape_stone@2x.png"
                    mode=""
                  ></image>
                  <text>1614751</text>
                </view>
                <view class="bottom-mon-bottom"> 今日宝石奖励 </view>
              </view>
            </view>
          </view>
          <view class="bottom-O">
            炸猴王资源采集飞船奖励来源于猴王逃跑成功时的奖池宝石,用户存入NDTU越多，时间越久，可获得的宝石奖励就越多，奖励会在第二天进行结算,每次存入、取出NDTU会收取
            0.1%手续费。
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      xuetiao: 15000, //血条
      shengyuxuetiao: 0, //剩余血条
      percentage: 100, //进度条
      taopaoCount: 60,
      times: 0,
    };
  },
  created() {
    this.shengyuxuetiao = this.xuetiao;
  },
  methods: {
    blood() {
      uni.navigateTo({
        url: '/pages/blood/index',
      });
    },
    Jackpot() {
      uni.navigateTo({
        url: '/pages/Jackpot/index',
      });
    },
    // 支付宝石方法
    handlePay(count) {
      if (this.shengyuxuetiao > 0) {
        //调用定时器
        if (!this.times) {
          this.handerTime();
          // 扔炸弹函数
        }
        this.createAndMoveElement();
        // 血量提示框
        this.$refs.uToast.show({
          type: 'error',
          message: '-' + count,
          position: 'top',
          duration: 300,
          icon: false,
        });
        //百分比血条
        this.shengyuxuetiao = this.shengyuxuetiao - count;
        this.percentage = Math.round(
          (this.shengyuxuetiao / this.xuetiao) * 100
        );
        console.log('this.shengyuxuetiao----->', this.shengyuxuetiao);
      } else {
        clearInterval(this.times);
        // 提示框
        return this.$refs.uToast.show({
          type: 'default',
          message: '猴王已阵亡',
          position: 'center',
          duration: 2000,
          icon: false,
        });
      }
    },
    // 倒计时方法
    handerTime() {
      // 判断如何有定时器清除
      if (this.times) {
        clearInterval(this.times);
      }
      this.times = setInterval(() => {
        this.taopaoCount--;
        if (this.taopaoCount === 0) {
          clearInterval(this.times);
          this.$refs.uToast.show({
            type: 'default',
            message: '时间结束了',
            position: 'center',
            duration: 2000,
            icon: false,
          });
          return;
        }
      }, 100);
    },
    // 扔炸弹函数
    createAndMoveElement() {
      // 创建一个新的元素
      const myArray = [0, 100];
      const fun = this.getRandomFromArray(myArray);
      const num = this.getRandomInt(35, 70);
      const newElement = document.createElement('div');
      newElement.style.width = '50px';
      newElement.style.height = '50px';
      newElement.style.backgroundImage = "url('/static/index/zhadan.png')";
      newElement.style.backgroundSize = 'cover';
      // 获取目标容器的位置信息
      const targetContainer = this.$refs.targetContainer.$el;
      const targetRect = targetContainer.getBoundingClientRect();
      // 将新元素添加到页面中
      document.body.appendChild(newElement);
      // 设置元素的初始位置
      newElement.style.position = 'absolute';
      newElement.style.left = fun + '%';
      newElement.style.top = num + '%';
      // 触发重绘，以便应用初始位置
      newElement.getBoundingClientRect();
      // 添加过渡效果
      newElement.style.transition = 'left .5s, top .5s';
      // 将新元素移到目标容器的位置
      const top = this.getRandomInt(
        targetRect.top,
        targetRect.top + targetRect.height - 50
      );
      const left = this.getRandomInt(
        targetRect.left,
        targetRect.left + targetRect.width - 50
      );
      newElement.style.left = left + 'px';
      newElement.style.top = top + 'px';
      setTimeout(() => {
        newElement.style.backgroundImage = "url('/static/index/baozha.png')";
        setTimeout(() => {
          document.body.removeChild(newElement);
        }, 500);
      }, 500);
    },
    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    getRandomFromArray(array) {
      const randomIndex = Math.floor(Math.random() * array.length);
      return array[randomIndex];
    },
  },
};
</script>

<style lang="scss" scoped>
view {
  .Popup {
    min-width: 100vw;
    height: 559rpx;
    background: #ffffff;
    border-radius: 57rpx 57rpx 0rpx 0rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .Popup-first {
      width: 315rpx;
      height: 150rpx;
      margin-top: -80rpx;
      background: #ffffff;
      border-radius: 150rpx 150rpx 0rpx 0rpx;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      uni-image {
        width: 127rpx;
        height: 154rpx;
        margin-top: -100rpx;
      }
    }
    .Popup-two {
      font-size: 46rpx;
      font-family: Douyin Sans, Douyin Sans;
      font-weight: bold;
      color: #fd4d2c;
    }
    .Popup-three {
      width: 88%;
      height: 90rpx;
      margin-top: 40rpx;
      border-radius: 11.45rpx;
      background: linear-gradient(to right, #000000ff, #424242ff);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 27rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #ffffff;
      uni-image {
        width: 36rpx;
        height: 38rpx;
        margin: 0 15rpx 0 15rpx;
      }
    }
    .Popup-four {
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 21rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: rgba(6, 6, 6, 0.5);
      uni-image {
        width: 36rpx;
        height: 38rpx;
        margin-right: 15rpx;
      }
    }
    .Popup-five {
      font-size: 21rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #06060680;
      padding-bottom: 5rpx;
    }
    .Popup-six {
      background: url('../../static/popup/bg_buy_bomb_bottom1@2x.png');
      background-size: cover;
      width: 96%;
      height: 140rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      border-radius: 10rpx;
      .Popup-six-top {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 21rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: rgba(6, 6, 6, 0.5);
        padding-right: 40rpx;
        padding-top: 10rpx;
        .Popup-six-left {
          font-size: 23rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #060606;
        }
        .Popup-six-right {
          font-size: 38rpx;
          font-family: Douyin Sans, Douyin Sans;
          font-weight: bold;
          color: #060606;
          display: flex;
          justify-content: flex-end;
        }
        uni-image {
          width: 36rpx;
          height: 38rpx;
          margin-right: 15rpx;
        }
      }
    }
  }
  // 头部
  .header {
    background: url('../../static/index/image12@2x(2).png');
    background-size: cover;
    height: 1389rpx;
    display: flex;
    flex-direction: column;
    .Popup {
      width: 100%;
      height: 601rpx;
      background: url('../../static/popup/Group132@2x.png');
      background-size: cover;
    }
    .header-A {
      padding: 61rpx 0 0 28rpx;
      display: flex;
      height: 47rpx;
      margin-bottom: 53rpx;
      .left {
        padding-right: 40rpx;
        font-size: 42rpx;
        font-family: Douyin Sans, Douyin Sans;
        font-weight: bold;
        color: #ffffffff;
      }
      .right {
        height: 51rpx;
        border-radius: 76.34rpx;
        border: 2rpx solid #ffffffb0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 15rpx 0 15rpx;
        font-size: 27rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        color: #ffffff;
      }
    }
    //血条
    .header_lifebar {
      width: 80%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      .left_touxiang {
        width: 80rpx;
        height: 80rpx;
      }
      .header_lifebar_right {
        width: 100%;
        position: relative;
        color: white;
        font-size: 24rpx;
        .xuetiaoshu {
          position: absolute;
          top: 2rpx;
          right: 20rpx;
        }
        .xuetiao_title {
          position: absolute;
          top: 2rpx;
          left: 20rpx;
        }
      }
    }
    .header-C {
      font-size: 34rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      color: #ffffff;
      text-align: center;
      height: 31rpx;
      margin-top: 32.44rpx;
    }
    .header-D {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: flex-end;
      margin-top: -80rpx;

      .bottom-T {
        width: 95.42rpx;
        height: 95.42rpx;
        margin-bottom: -35rpx;
        margin-right: 10rpx;
      }
      .bottom-B {
        background: url('../../static/index/Rectangle55@2x.png');
        width: 150rpx;
        height: 70rpx;
        display: flex;
        justify-content: end;
        align-items: flex-end;
        text {
          font-size: 29rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          color: #ffd3af;
          padding-right: 10rpx;
        }
      }
    }
    .header-J {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: flex-end;
      margin-top: 20rpx;
      .number-left {
        background-color: #ffffff;
        height: 80rpx;
        display: flex;
        border-radius: 35rpx 0 0 35rpx;
        justify-content: space-between;
        align-items: center;
        padding-right: 10rpx;
        uni-image {
          width: 60rpx;
          height: 60rpx;
          padding-right: 9.54rpx;
        }
        .number-right-child {
          display: flex;
          flex-direction: column;
          font-size: 23rpx;
          font-family: Douyin Sans, Douyin Sans;
          font-weight: bold;
          color: #000000;
          .number-left-bottom {
            display: flex;
            align-items: center;
            uni-image {
              width: 36rpx;
              height: 38rpx;
              padding-left: 9.54rpx;
            }
          }
        }
      }
    }
    // 猴子
    .houwang_content {
      position: relative;
      width: 100%;
      height: 616rpx;
      .header-E {
        height: 616rpx;
        text-align: center;
        margin-bottom: 174rpx;
        .houwang {
          width: 471rpx;
          height: 616rpx;
          background-size: cover;
        }
      }
      // 头像
      .houwang_bomb {
        position: absolute;
        top: 20%;
        left: 0rpx;
        // left: -100rpx;
        .left_image1 {
          margin-top: 0rpx;
        }
        .left_image2 {
          margin-top: 20rpx;
        }
        .left_image3 {
          margin-top: 20rpx;
        }
        uni-image {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }
  }
  // 中间
  .content {
    // height: 500rpx;
    background: linear-gradient(to bottom, #ffffff00, #ffffff99);
    font-size: 68.7rpx;
    display: flex;
    flex-direction: column;
    .content-A {
      height: 74rpx;
      margin-top: -150rpx;
      display: flex;
      justify-content: center;
      background: linear-gradient(to bottom, #28242545, #222222ff);
      font-family: Douyin Sans-Bold;
      font-weight: Bold;
      uni-image {
        width: 290rpx;
        height: 74rpx;
      }
      .first {
        margin-right: 27rpx;
      }
    }
  }
  // 底部按钮
  .bottom {
    // height: 2476rpx;
    background: #222222;
    .bottom-pad {
      padding-left: 23rpx;
      padding-right: 23rpx;
      margin-top: -5rpx;
      // 炸弹按钮
      .bottom-A {
        display: flex;
        .A-orange {
          height: 135.5rpx;
          width: 229rpx;
          display: block;
          background: url('../../static/index/Rectangle@2x.png');
          background-size: cover;
          margin-right: 9.54rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1;
          .left {
            background: url('../../static/index/Group124@2x.png');
            background-size: cover;
            display: block;
            width: 53rpx;
            height: 53rpx;
            margin-right: 25rpx;
          }
          .right {
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: center;
            align-items: center;
            .right-top {
              font-size: 27rpx;
              font-family: Douyin Sans, Douyin Sans;
              font-weight: bold;
              color: #ffffff;
            }
            .right-bottom {
              width: 103rpx;
              height: 32rpx;
              background: #f33f26;
              border-radius: 19rpx 19rpx 19rpx 19rpx;
              opacity: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 21rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              color: rgba(255, 255, 255, 0.5);
              margin-top: 11.45rpx;
            }
          }
        }
      }
      .bottom-B {
        height: 66.8rpx;
        display: flex;
        margin-top: 32.44rpx;
        .bottom-B-left {
          display: flex;
          width: 202rpx;
          height: 66.8rpx;
          border-radius: 76.34rpx;
          border: 2rpx solid #ffffff33;
          background-color: #222222ff;
          margin-left: -50rpx;
          justify-content: center;
          align-items: center;
          .mine {
            font-size: 25rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            padding-right: 9.54rpx;
          }
          uni-image {
            width: 38rpx;
            height: 38rpx;
            padding-right: 9.54rpx;
          }
          .number {
            font-size: 31rpx;
            font-family: Douyin Sans, Douyin Sans;
            font-weight: bold;
            color: #fec090;
          }
        }
        .bottom-B-content {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .point {
            width: 31rpx;
            height: 31rpx;
            background: url('../../static/index/gantanhao-yuankuang.png');
            background-size: cover;
            margin-right: 13.4rpx;
          }
          .point-content {
            font-size: 21rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
          }
        }
        .bottom-B-right {
          width: 202rpx;
          height: 66.8rpx;
          display: flex;
          border-radius: 76.34rpx;
          border: 2rpx solid #ffffff33;
          background-color: #222222ff;
          margin-right: -50rpx;
          justify-content: center;
          align-items: center;
          uni-image {
            width: 38rpx;
            height: 38rpx;
            padding-right: 9.54rpx;
          }
          .mine {
            font-size: 25rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            padding-right: 9.54rpx;
          }
        }
      }
      .bottom-C {
        display: flex;
        align-items: center;
        height: 42rpx;
        margin-top: 40rpx;
        uni-image {
          width: 52rpx;
          height: 42rpx;
          margin-right: 5.8rpx;
        }
        .mine {
          font-size: 27rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          color: #ff7360;
        }
      }
      .bottom-D {
        font-size: 23rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        margin-top: 13.4rpx;
        margin-bottom: 51rpx;
      }
      .bottom-E {
        padding: 46rpx 34rpx;
        height: 362rpx;
        background-color: #1b1b1bff;
        border-radius: 19rpx;
        .bottom-E-top {
          font-size: 25rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: #ffffff;
          padding-top: 26.5rpx;
          padding-bottom: 17rpx;
        }
        .bottom-E-connent {
          font-size: 23rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.5);
          padding-bottom: 38rpx;
        }
        .bottom-E-bottom {
          display: flex;
          align-items: flex-end;
          height: 137rpx;
          margin-bottom: 49rpx;
          justify-content: space-between;
          .bottom-first,
          .bottom-two,
          .bottom-three,
          .bottom-four,
          .bottom-fine {
            width: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
          .bottom-first {
            uni-image {
              width: 122rpx;
              height: 55rpx;
            }
            .bottom-first-money {
              display: flex;
              align-items: center;
              height: 38rpx;
              text {
                font-size: 23rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                color: #ffffff;
              }
              uni-image {
                width: 38rpx;
                height: 38rpx;
              }
            }
          }
          .bottom-two {
            uni-image {
              width: 137.4rpx;
              height: 95.42rpx;
            }
          }
          .bottom-three {
            uni-image {
              width: 66.8rpx;
              height: 85.88rpx;
            }
            .bottom-three-money {
              display: flex;
              align-items: center;
              height: 38rpx;
              text {
                font-size: 23rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                color: #ffffff;
              }
              uni-image {
                width: 38rpx;
                height: 38rpx;
              }
            }
          }
          .bottom-four {
            height: 100%;
            line-height: 100%;
            uni-image {
              width: 23rpx;
              height: 23rpx;
            }
          }
          .bottom-fine {
            uni-image {
              width: 72rpx;
              height: 74rpx;
            }
            .bottom-fine-money {
              display: flex;
              align-items: center;
              height: 38rpx;
              text {
                font-size: 23rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                color: #ffffff;
              }
              uni-image {
                width: 38rpx;
                height: 38rpx;
              }
            }
          }
        }
      }
      .bottom-F,
      .bottom-G,
      .bottom-H {
        font-size: 23rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
      }
      .bottom-F,
      .bottom-G {
        padding-bottom: 7.6rpx;
      }
      .bottom-F {
        padding-top: 32.44rpx;
      }
      .bottom-H {
        padding-bottom: 45.8rpx;
      }
      .bottom-I {
        display: flex;
        align-items: center;
        height: 47rpx;
        image {
          width: 47rpx;
          height: 47rpx;
          margin-right: 5.8rpx;
        }
        .mine {
          font-size: 27rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          color: #ff7360;
        }
      }
      .bottom-J,
      .bottom-K {
        font-size: 23rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        margin-top: 8rpx;
      }
      .bottom-L {
        height: 145rpx;
        border-radius: 19rpx;
        padding: 10rpx 34rpx;
        background: #1b1b1bff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 32rpx;
        margin-bottom: 32rpx;
        .bottom-L-right {
          uni-image {
            width: 106.88rpx;
            height: 78rpx;
          }
        }
        .bottom-L-left {
          .bottom-L-top {
            font-size: 25rpx;
            color: #ffffff;
            // padding-top: 26.5rpx;
            // padding-bottom: 17rpx;
          }
          .bottom-L-connent {
            font-size: 23rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
      .bottom-M {
        font-size: 23rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
        padding-bottom: 22rpx;
      }
    }
    .bottom-N {
      background-color: black;
      color: white;
      .bottom-N-monkey {
        height: 637.4rpx;
        width: 100%;
        padding-top: 20rpx;
        background: url('../../static/index/fc1@2x.png');
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        .bottom-N-mon {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          padding-top: 180rpx;
          .bottom-mon-top {
            display: flex;
            justify-content: center;
            align-items: center;
            uni-image {
              width: 42rpx;
              height: 42rpx;
            }
            text {
              font-size: 61rpx;
              font-family: Douyin Sans, Douyin Sans;
              font-weight: bold;
              color: #ffffff;
              padding-left: 9.54rpx;
            }
          }
          .bottom-mon-bottom {
            font-size: 23rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            padding-top: 7.6rpx;
          }
        }
      }
    }
    .bottom-O {
      background-color: black;
      font-size: 21rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      padding-left: 21rpx;
      padding-right: 21rpx;
      padding-bottom: 110rpx;
    }
  }
}
// 添加炸弹类名
.zhadangActive {
  transform: translateX(150px) rotate(360deg);
  transition: all 0.5s;
  display: block;
}
.zhadangActive2 {
  display: none;
}
// 猴王缩放
.houwangsuofang {
  transition: all 0.3;
  transform: scale(0.9);
}
// 提示框
::v-deep .uToast {
  .u-type-error {
    font-weight: bold;
    background-color: transparent;
  }
}
</style>
